<style>
.tip {
	color: #fff;
	width: 172px;
	z-index: 13000;
}

.tip-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	padding: 8px 8px 4px;
	background: #777;
}

.tip-text {
	font-size: 11px;
	padding: 4px 8px 8px;
	background: #777;
}
img {
	background: #444;
	padding: 4px;
}
.toolTipElement3 {
	padding: 20px;
	border: 1px solid #000;
	float: left;
}
#mt-content h1 {
	font-size: 16px;
	font-weight: bold;
	margin: 8px 0px;
}
</style>

<h1>These links should let you enable and disable the tips</h1>
<div id="togglers"><a id="enable">attach tips</a> | <a id="disable">detach tips</a></div>

<h1>Mouseover this image to have a tip that follows your mouse</h1>
<img border="0" alt="MooTools" src="/asset/more/mootools.png" title="MooTools" rel="The best damn JS framework on Earth." class="toolTipElement" />

<h1>Mouseover this image to show a tip that is in a fixed location</h1>
<img border="0" alt="MooTools" src="/asset/more/mootools.png" title="MooTools" rel="The best damn JS framework on Earth." class="toolTipElement2" />

<h1>The tips on these elements are different for the container and the child</h1>
<div class="toolTipElement3" alt="Container Tip">
	<img border="0" alt="MooTools" src="/asset/more/mootools.png" title="MooTools" class="toolTipElement3" />
</div>

<script src="/depender/build?require=More/Tips"></script>
<script>

var elements = [
	$$('.toolTipElement'),
	$$('.toolTipElement2'),
	$$('.toolTipElement3')
];

elements[2].store('tip:text', 'The best damn JS framework on earth.<br /><img src="/asset/more/cow.png" />');

var instances = [

	new Tips(elements[0]),

	new Tips(elements[1], {
		fixed: true,
		offset: {
			x: 10,
			y: 70
		}
	}),

	new Tips(elements[2], {
		offset: {
			x: 10,
			y: 70
		}
	})

];

document.id('enable').addEvent('click', function(){
	instances.each(function(tips, index){
		tips.attach(elements[index]);
	});
});
document.id('disable').addEvent('click', function(){
	instances.each(function(tips, index){
		tips.detach(elements[index]);
	});
});

</script>
